<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;

        }
        #div1{
            width: 1920px;
            height: 400px;
            overflow: hidden;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0;
            left: 0;

        }
        ul li {
            width: 1920px;
            height: 400px;
            float: left;
        }

        ul img {
            float: left;
            width: 1920px;
            height: 400px;
        }
        #page{
            width: 200px;
            z-index: 1001;
            position: absolute;
            top:380px;
            left: 50%;
            margin-left: -100px;
        }
        .ppage span{
            width: 15px;
            height: 15px;
            margin-left: 20px;
            display: inline-block;
            border-radius: 50%;

        }
        .normal{
            background: #ffffff;
            border: 1px solid #E4E4E4;
        }
        .active{
            background:#e4e4e4;
            border: 1px solid #e4e4e4;
        }

    </style>
</head>
<body>
<div id="div1">
    <div class="ppage" id="page">
        <span class="active"></span>
        <span class="normal"></span>
        <span class="normal"></span>
        <span class="normal"></span>
    </div>
    <ul  style="width: 1920px;">
            <li ><img src="images5/1.jpg"></li>
            <li><img src="images5/2.jpg"></li>
            <li><img src="images5/3.jpg"></li>
            <li><img src="images5/4.jpg"></li>
    </ul>
</div>

  <script type="text/javascript" src="js/util.js"></script>
  <script>
      var oUl = document.getElementsByTagName('ul')[0];
      var aLi = document.getElementsByTagName('li');

      var div1 = document.getElementById('div1');
      var aSpan = document.getElementsByTagName('span');

      var now = 0;

      oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';

      for(var i=0;i<aSpan.length;i++){
          aSpan[i].index = i;
          aSpan[i].onclick = function () {

              now = this.index;
              tab();
          }
      }

      function tab() {
          for(var i=0;i<aSpan.length;i++){
              aSpan[i].className ='normal';
          }
          aSpan[now].className = 'active';
          startMove(oUl,{left:-1920*now});//移动相对应的距离而不是startMove(oUl,{left:-1920});
      }
      function next() {
          now++;
          if(now==aLi.length)
          {
              now=0;
          }

          tab();
      }
      var timer = setInterval(next,2000);
      div1.onmouseover = function () {
          clearInterval(timer);
      };
      div1.onmouseout = function () {
          timer = setInterval(next,2000);
      }


  </script>
</body>
</html>